//员工界面的js
//JavaScript代码区域
layui.use(['element', 'form', 'jquery', 'layer', 'table', 'upload','laydate'], function () {
    var element = layui.element;
    var form = layui.form;
    var $ = layui.jquery;
    var table = layui.table;
    var layer = layui.layer;
    var upload = layui.upload;
    var laydate = layui.laydate;

    //添加员工工作的时间
    laydate.render({
        elem : '#a_workTime',
        type: 'datetime'    //既要年月日又要时分秒
    })

    //修改员工工作的时间
    laydate.render({
        elem : "#e_workTime",
        type: 'datetime'    //既要年月日又要时分秒
    })

    var tableData = table.render({
        elem: '#emps'
        , url: '/system/employee/loadAllEmployees'
        , page: true //开启分页
        , toolbar: true //开启头部工具栏，并为其绑定左侧模板
        , title: '员工数据表'
        , limits: [10, 20, 50, 100]
        , cols: [ [
            {field: 'empId', title: '员工编号', sort: true, align: 'center'}
            , {field: 'empName', title: '员工姓名', align: 'center'}
            , {field: 'empPassword', title: '员工密码', align: 'center'}
            , {field: 'empAge', title: '员工年龄', align: 'center'}
            , {field: 'empPhone', title: '员工联系方式', align: 'center'}
            , {field: 'workTime', title: '工作时间', align: 'center'}
            , {field: 'chargeArea', title: '负责区域', align: 'center'}
            , {field: 'communityId', title: '所属小区ID', align: 'center'}
            , {field: 'empPic', title: '员工头像', align: 'center' , templet : function (d) {
                    return '<img width=50 height=50 src=/system/employee/file/showImgByPath?path='+d.empPic+'/>'
                }}
            , {fixed: 'right', title: '操作', toolbar: '#barDemo', align: 'center'}
        ] ]
    });

    //获取弹出层的索引
    var addIndex;
    //添加员工弹出层
    $('#doAdd').click(function () {
        addIndex = layer.open({
            type: 1,
            title : '添加员工',
            //content属性为打开某个定义好的
            content: $('#addEmpDiv'),
            area: ['800px', '600px'],
            //这个函数是防止打开弹窗后遮挡屏幕
            success:function(layer){
                var mask = $(".layui-layer-shade");
                mask.appendTo(layer.parent());
                //其中：layer是弹层的DOM对象
                //每次打开弹出层时刷新内容
                $('#reloadFrame').click();
                $('#addEmpPic').attr("src","/system/employee/file/showImgByPath?path=default/default.jpg");
                $('#a_empPic').val("default/default.jpg");
            }
        })
    });
    //添加用户事件结束

    //监控提交事件
    form.on("submit(doSubmit)", function (data) {
        //alert(data.field);
        $.post('/system/employee/addEmployee', data.field, function (res) {
            if (res.code == 200) {
                layer.confirm('是否继续录入？', {
                    btn: ['继续', '取消'] //按钮
                }, function (myself) {
                    //无论继续输入还是取消重置按钮会被点击
                    //点击继续后清空图片为默认图片,清空隐藏框里的值
                    $('#addEmpPic').attr("src","/system/employee/file/showImgByPath?path=default/default.jpg");
                    $('#a_empPic').val("default/default.jpg");
                    $('#reloadFrame').click();
                    layer.close(myself);
                }, function () {
                    //无论继续输入还是取消重置按钮会被点击
                    //点击继续后清空图片为默认图片,清空隐藏框里的值
                    $('#addEmpPic').attr("src","/system/employee/file/showImgByPath?path=default/default.jpg");
                    $('#a_empPic').val("default/default.jpg");
                    $('#reloadFrame').click();
                    layer.close(addIndex);
                });
            }
            //不管成功还是失败,父级页面都要刷新
            tableData.reload();
        });
        //要应用ajax提交,所以return false
        return false;
    });
    //提交事件结束

    //执行查询
    form.on("submit(doSearch)", function (data) {
        tableData.reload({
            url: '/system/employee/loadAllEmployees',
            //where是将条件拼接在后面
            where: data.field
        })
        //返回数据时自动将输入框清空
        $('#s_empId').val("");
        $('#s_empName').val("");
        $('#s_empPhone').val("");
        //防止提交
        return false;
    })
    //查询事件结束

    //监听工具条的事件
    table.on('tool(empTable)',function (obj) {
        //userTable是数据表格中lay-filter对应的事件
        var event = obj.event;
        var empData = obj.data;
        switch (event) {
            case 'detailEmpById':
                console.log(empData.empId);
                $.post('/system/employee/detailEmpById',empData,function (res) {
                    //console.log(res);
                    empDetail = "<div style='margin: 20px;'>" +
                                "员工头像 : <span><img style='width: 80px;height: 80px;' src=/employee/file/showImgByPath?path="+res.empPic+"></span><hr class='layui-bg-green'>"+
                                "员工编号 : <span style='font-weight: bold;'>"+res.empId+"</span><hr class='layui-bg-green'>"+
                                "员工姓名 : <span style='font-weight: bold;'>"+res.empName+"</span><hr class='layui-bg-green'>" +
                                "员工联系方式 : <span style='font-weight: bold;'>"+res.empPhone+"</span><hr class='layui-bg-green'>"+
                                "员工密码 : <span style='font-weight: bold;'>"+res.empPassword+"</span><hr class='layui-bg-green'>"+
                                "工作时间 : <span style='font-weight: bold;'>"+res.workTime+"</span><hr class='layui-bg-green'>"+
                                "负责区域 : <span style='font-weight: bold;'>"+res.chargeArea+"</span><hr class='layui-bg-green'>"+
                                "所属小区ID : <span style='font-weight: bold;'>"+res.communityId+"</span><hr class='layui-bg-green'>"+
                                "所属小区(通过所属小区ID查出) : <span style='font-weight: bold;'>"+res.community['communityName']+
                                "</span></div>"
                    layer.open({
                        type : 1,
                        title : '员工详情',
                        area : ['600px','550px'],
                        content : empDetail
                    })
                })
                break;
            //通过id删除用户
            case 'deleteEmpById':
                layer.confirm("确认删除 ID为 "+empData.empId+" 这条数据吗?", function(){
                    $.post('/system/employee/deleteEmpById',empData,function (res) {
                        if (res.code==200){
                            //无论删除成功还是失败都刷新表格
                            tableData.reload();
                            layer.msg(res.msg);
                        }else if (res.code==-1){
                            //无论删除成功还是失败都刷新表格
                            tableData.reload();
                            layer.msg(res.msg);
                        }
                    })
                });
                break;
            //删除事件结束

            //修改事件开始
            case 'editEmpById':
                //获取修改用户弹出层的索引
                var editIndex;
                //修改用户弹出层
                editIndex = layer.open({
                    type: 1,
                    title : '修改员工',
                    //content属性为打开某个定义好的
                    content: $('#editEmpDiv'),
                    area: ['800px', '700px'],
                    success:function(layer){
                        //防止打开弹窗后遮挡屏幕
                        var mask = $(".layui-layer-shade");
                        mask.appendTo(layer.parent());
                        //其中：layer是弹层的DOM对象
                        form.val('formData',empData);
                        $('#editEmpPic').attr("src",'/system/employee/file/showImgByPath?path='+empData.empPic);
                    }
                });
                //监听修改事件
                form.on('submit(editSubmit)',function (empData) {
                    layer.confirm("确认修改吗?",function () {
                        $.post('/system/employee/editEmployee',empData.field,function (res) {
                            if (res.code==200){
                                //无论修改成功还是失败都刷新表格
                                layer.close(editIndex);
                                tableData.reload();
                                layer.msg(res.msg);
                            }else if (res.code==-1){
                                //无论删除成功还是失败都刷新表格
                                layer.close(editIndex);
                                tableData.reload();
                                layer.msg(res.msg);
                            }
                        })
                    })
                    return false;
                })
                break;
            //修改用户事件结束
        }
    })

    //修改用户头像的文件上传事件
    upload.render({
        elem : '#editEmpPic',
        url : '/system/employee/file/uploadEmpPic',
        method : 'post',
        acceptMime : 'image/*',     //上传时只显示文件夹图片
        size : 1024 * 5,    //上传限制为5MB
        done : function (res) {
            var path = res.path;
            //alert(path);
            $('#editEmpPic').attr('src','/system/employee/file/showImgByPath?path='+path);
            $('#e_empPic').val(path);
        }
    })
    //修改用户头像的文件上传事件结束

    //添加用户头像的文件上传事件
    upload.render({
        elem : '#addEmpPic',
        url : '/system/employee/file/uploadEmpPic',
        method : 'post',
        acceptMime : 'image/*',     //上传时只显示文件夹图片
        size : 1024 * 5,    //上传限制为5MB
        done : function (res) {
            var path = res.path;
            //alert(path);
            $('#addEmpPic').attr('src','/system/employee/file/showImgByPath?path='+path);
            $('#a_empPic').val(path);
        }
    })
    //添加用户头像的文件上传事件结束

});